<template>
<div>
  <header class="bar bar-nav" >
    <a class="button button-link button-nav pull-left" v-link="{path: '/study/menu', replace: false}">
    <span class="icon icon-left"></span>
    </a>
    <a class="create-actions button button-link button-nav pull-right">选择专业</a>

    <h1 class="title">排名</h1>
  </header>
  <div class="content">
    <div class="list-block ">
    <ul>
      <li v-for="(index,item) in schools">
        <a class="item-content item-link"  v-link="{path: '/study/info', query: {id: item.id}, replace: false}">
        <div class="item-inner">
          <div class="item-title">{{ item.rank }}</div>
	  <div class="item-after">{{ item.name }}</div>
        </div>
        </a>
      </li>
    </ul>
    </div>
  </div>
 </div>
</template>
<script>
import $ from 'zepto'
export default {
  route: {
    data () {
      console.log('data.....')
      this.$http.get(this.apiUrl).
      then(function(response) {
        this.$set('schools', response.json().data)
        console.log('1....' + this.schools)
      })
      this.$http.get(this.apiUrl2).
      then(function (response) {
        this.$set('majors', response.json().majors)
        this.$set('count', response.json().length)
        console.log('2....' + this.majors)
        console.log('2.....' + this.count)
      })
    }
  },
  ready () {
    $.init()
    const self = this
    $(document).on('click', '.create-actions', function () {
      const buttons1 = [
        {
          text: '请选择',
          label: true
        }
      ]
      console.log('in....' + self.count)
      for (let i = 0; i < self.count; i++) {
        console.log(self.majors[i][0])
        buttons1.push({
          text: self.majors[i][0],
          bold: true,
          onClick: function() {
            self.$http.get(self.apiUrl3 + self.majors[i][0]).
            then(function (response) {
              self.$set('schools', response.json().schools)
            })
            $.alert('你选择了' + self.majors[i][0])
          }
        })
      }
      const buttons2 = [
        {
          text: '取消',
          bg: 'danger'
        }
      ]
      const groups = [buttons1, buttons2]
      $.actions(groups)
    })
  },
  data () {
    return {
      apiUrl: 'http://creatgo.com/oec/study?method=data',
      schools: [],
      majors: [],
      count: '',
      apiUrl2: 'http://creatgo.com/oec/study?method=majors',
      apiUrl3: 'http://creatgo.com/oec/study?method=majorrank&fieldname='
    }
  }
}
</script>
